<!doctype html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>后台登录-X-admin2.2</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <#include "common/header-static.ftl">
    <script src="${request.contextPath}/common/echarts.min.js?v=${staticVersion}" type="text/javascript"></script>
    <script>
        // 是否开启刷新记忆tab功能
        // var is_remember = false;
    </script>
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">管理员管理</a>
                <a href="">数据监控统计</a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="echartsClass">
    <div class="div-inline selectDate" style="margin-top:20px;margin-bottom:20px">
        <!--type="date"-->
        <span style="color: #008B8B;display: inline-block;position: absolute;top: 10px;">选择日期:</span>&nbsp;
        <div class="layui-inline layui-show-xs-block">
            <input class="layui-input" autocomplete="off" placeholder="" name="theDate"
                   id="theDate" value="${theDate}">
        </div>
        &nbsp;&nbsp;<span style="">环境名称:</span>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="evnName" id="evnName" placeholder="">
        </div>
    </div>

    <div id="pageView" class="div-inline pageView" style="height:400px;margin-top: 20px;width: 99%;"></div>
</div>
<script>
    $(document).ready(function () {
        layui.use(['table', 'laydate', 'form'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            laydate.render({
                elem: '#theDate'
                , type: 'date'
                , max: 0
                , done: function (value, date) {
                    initPageViewData()
                }
            });
        });
        initPageViewData();
    });

    function initPageViewData() {
        var theDate = $("#theDate").val();
        var evnName = $("#evnName").val();
        var myChart = echarts.init(document.getElementById('pageView'));
        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        var names = [];    //（实际用来盛放X轴坐标值）
        var nums = [];    //（实际用来盛放Y坐标值）
        $.ajax({
            type: "get",
            async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: '${request.contextPath}/admin/monitor/pageView',    //请求
            data:  {'theDate': theDate,'evnName':evnName},
            dataType: "json",
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result.success) {
                    var startScollBar = result.data.startScollBar;
                    var endScollBar = result.data.endScollBar;
                    var keyList = result.data.keyList;
                    for (var i = 0; i < keyList.length; i++) {
                        names.push(keyList[i]);
                    }
                    var valueList = result.data.valueList;
                    for (var i = 0; i < valueList.length; i++) {
                        nums.push(valueList[i]);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        /*title: {
                          text: '访问量统计'
                        },*/
                        legend: {
                            data: ['访问量统计']
                        },
                        dataZoom: [{
                            // type: 'slider',
                            // show: true,
                            // xAxisIndex: [0],
                            // zoomLock: true,
                            // start: startScollBar,//滚动条的起始位置
                            // end: endScollBar, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                            // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            // handleSize: '80%',
                            // handleStyle: {
                            //     color: '#fff',
                            //     shadowBlur: 3,
                            //     shadowColor: 'rgba(0, 0, 0, 0.6)',
                            //     shadowOffsetX: 2,
                            //     shadowOffsetY: 2
                            // }
                            type: 'slider',
                            show: true, // flase直接隐藏图形
                            showDetail: false,
                            xAxisIndex: [0],
                            height: 3,
                            showDataShadow: false,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            fillerColor: '#FEA629',
                            borderColor: 'transparent',
                            backgroundColor: 'transparent',
                            handleSize: 18,
                            bottom: 40,
                            zoomLock: true,
                            // dataBackgroundColor: 'transparent',
                            start: startScollBar,//滚动条的起始位置
                            end: endScollBar, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                            handleStyle: {
                                color: '#FEA629',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            },
                            dataBackground: {
                                lineStyle: {
                                    color: 'transparent'
                                },
                                areaStyle: {
                                    color: 'transparent'
                                }
                            }
                        }],
                        grid: {
                            left: '2%',
                            right: '4.5%',
                            bottom: '5.5%',
                            containLabel: true
                        },
                        xAxis: {
                            data: names,
                            axisLabel: { //设置x轴的字
                                show: true,
                                interval: 0,//使x轴横坐标全部显示
                                textStyle: {//x轴字体样式
                                    color: "rgba(255,255,255,1)",
                                    margin: 5
                                }
                            },
                            axisTick: {
                                lineStyle: {
                                    color: '#6076AD',
                                    opacity: 0.3
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#6076AD',
                                    opacity: 0.3
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#6076AD',
                                    opacity: 0.3
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: { //设置x轴的字
                                show: true,
                                interval: 0,//使x轴横坐标全部显示
                                textStyle: {//x轴字体样式
                                    color: "rgba(255,255,255,1)",
                                    margin: 5
                                }
                            },
                            axisTick: {
                                lineStyle: {
                                    color: '#6076AD',
                                    opacity: 0.3
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#6076AD',
                                    opacity: 0.3
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#6076AD',
                                    opacity: 0.3
                                }
                            }
                            // , min: 0
                            // , max: 3000
                        },
                        color: ['#5592FF'],
                        legend: {
                            right: 50,
                            // width: '50%',
                            itemWidth: 14,
                            itemHeight: 14,
                            textStyle: {
                                fontSize: 14,
                                color: '#008B8B'
                            },
                            icon: 'rect'
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            type: 'line',
                            name: '访问量统计',
                            itemStyle: {normal: {label: {show: true}}},
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: function (params) {
                                        if (params.value > 0) {
                                            return params.value;
                                        } else {
                                            return '';
                                        }
                                    }
                                }
                            },
                            data: nums
                        }]
                    });
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })
        setTimeout("initPageViewData()", 30000);
    }

</script>
</body>

</html>